'use strict'

var React = require('react-native');

var {
  View,
  TextInput,
  Text,
  StyleSheet,
} = React;

var TextInputView = React.createClass({
  getInitialState: function() {
    return {showStr: 'hello world'}
  },

  _onBlur: function() {
    this.setState({showStr: 'onBlur'});
  },

  _onChange: function() {
    this.setState({showStr: 'onChange'});
  },

  _onChangeText: function(text) {
    this.setState({showStr: 'onChangeText:  ' + text});
  },


  render: function() {
    return (
      <View>
        <Text style={{marginTop: 20}}>
          {this.state.showStr}
        </Text>
        <TextInput style={styles.textInputStyle}
         keyboardType="email-address"
         keyboardAppearance="dark"
         onBlur={this._onBlur}
         onChange={this._onChange}
         onChangeText={this._onChangeText}
         />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  textInputStyle: {
    marginTop: 30,
    width: 320,
    height: 200,
    borderWidth: 1,
  }
});

module.exports = TextInputView;
